<template>
	<view class="content">
	<view class="content">
	        <view class="search">
	            <view class="s-box">
	                <text class="iconfont icon-sousuo1"></text>
	                <input type="text" name="" id="" placeholder="请输入目的地国家"/>
	            </view>
	        </view>
			
	        <view class="map">
	            <view class="map-list">
	                <view v-for="(item,index) in initzhou"   :class="[item.class,item.type?'ac':'']" @click="changezhou(item)"  :key="index">
	                    <text>{{item.zhou}}</text>
	                </view>
	               
	            </view>
	        </view>
	        <view class="hot-place">
	            <view>
	                <p>{{zhoulist}}热门目的地</p>
	            </view>
	            <view class="hot-list">
	                <view class="nav" v-for="(item,index) in customerlist" :key="index">
	                    <image :src="item.country_pic_url" alt=""></image>
	                    <view>
	                        <text>{{item.country}}</text>
	                        <text> {{item.country_en}}</text>
	                    </view>
	                </view>
	             
	            </view>
	        </view>
	        <view class="other-place">
	            <view>
	                <p>{{zhoulist}}其他目的地</p>
	                <text>拼音首字母排序</text>
	            </view>
	            <view class="o-name" v-for="(item,index) in otherlist" wx:key="index">
	            {{item.country}} <text>{{item.country_en}}</text>
	            </view>
	           
	        </view>
	    </view>
	</view>
</template>

<script>
	
	import http from  "../../until/http.js";
	export default {
		data() {
			return {
				customerlist:[],
				otherlist:[],
				initzhou:[
				  {zhou:"欧洲",en:"Europe",class:'ouzhou',type:false},
				  {zhou:"非洲",en:"Africa",class:'feizhou',type:false},
				  {zhou:"亚洲",en:"Asia",class:'yazhou',type:true},
				  {zhou:"北美洲",en:"NorthAmerica",class:'beimei',type:false},
				  {zhou:"南美洲",en:"SouthAmerica",class:'nanmei',type:false},
				  {zhou:"大洋洲",en:"Oceania",class:'dayang',type:false},
				]
				,zhoulist:'亚洲'
			}
		},
		onLoad() {
   this.loaddata('亚洲','Asia')
		},
		methods: {
			 changezhou(ev){
			
			   const {zhou,en} =ev
			
			    const initzhouArray = Array.from(this.initzhou);
			 
			const getinitdata=initzhouArray.map(item=>{
			  if(item.zhou===zhou){
			
			    return {...item,type:true}
			  }
			  else{
			return {...item,type:false}
			  }
			})
			this.initzhou=getinitdata
			this.zhoulist=zhou
			this.loaddata(zhou,en)
			  },
			// 获取数据
 loaddata(zhou,en){
    http.request(`/product/desc/CountryList/${zhou}/${en}`,'GET').then(res=>{
      console.log(res);
      this.customerlist=res.data.hot_country_list
      this.otherlist=res.data.other_country_list
    })
  },
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		 background: #f2f2f2;
	}
	
	
/* 	.content {
	    overflow: auto;
	    background: #f2f2f2;
	} */
	
	.search {
	    height: 32px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    padding: 12px 35px;
	}
	
	.s-box {
	    width: 270px;
	    height: 34.9988px;
	    padding: 0 7.5px;
	    display: flex;
	  
	    align-items: center;
	    background-color: white;
	    border-radius: 25.0012px;
	
	} 
	
	.s-box text {
	    font-size: 19.9988px;
	    margin-right: 18px;
	    margin-left: 7.0012px;
	    color: #455457;
	 
	}
	
	.s-box input {
	    width: 90%;
	  
	  
	    outline: none;
	    height: 18px;
	}
	
	
	
	
	.map {
	    height: 212px;
	    border-bottom: .266667rem solid #bdc2c3;
	}
	
	.map-list {
	    margin: 20px 16px 2px;
	    height: 211px;
	    font-size: 13px;
	    position: relative;
	}
	
	.map-list view {
	    position: absolute;
	}
	
	.map-list view text {
	    position: absolute;
	}
	
	.ouzhou {
	    width: 188px;
	    height: 103px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/ouzhou.png) 0 -111px/186px no-repeat;
	    top: 0;
	    left: 0;
	}
	
	.ouzhou text {
	    top: 40px;
	    left: 73px;
	}
	
	
	.feizhou {
	    width: 76px;
	    height: 82px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/feizhou.png) 0 -81px/76px no-repeat;
	    top: 76px;
	    left: -7px;
	}
	
	.feizhou text {
	    top: 23px;
	    left: 28px;
	}
	
	.yazhou {
	    width: 94px;
	    height: 80px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/yazhou.png) 0rpx -160rpx/184rpx no-repeat;
	    top: 57px;
	    left: 62px;
	}
	.map-list .ac{
	    background-position:0 0;
	}
	
	
	.yazhou text {
	    top: 20px;
	    left: 25px;
	    /* color: #cbcaca; */
	}
	
	.beimei {
	    width: 153px;
	    height: 124px;
	    top: -0.4rem;
	    right: 4px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/beimei.png) 0rem -119px/149px no-repeat;
	}
	
	.beimei text {
	    top: 57px;
	    left: 48px;
	}
	
	.nanmei {
	    width: 82px;
	    height: 115px;
	    bottom: 7px;
	    right: 23px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/nanmei.png) 1px -108px/79px no-repeat;
	}
	
	.nanmei text {
	    top: .986667rem;
	    left: 1.253333rem;
	}
	
	.dayang {
	    width: 56px;
	    height: 47px;
	    bottom: 27px;
	    left: 116px;
	    background: url(http://www.51houniao.com/wx/customer/classic/lib/images/dayangzhou.png)1px 48px/55px;
	}
	
	.dayang text {
	    top: 6px;
	    left: 5px;
	}
	
	.hot-place {
	    padding: 0 12px;
	}
	
	.hot-place>view:first-child {
	    padding: 12px 0;
	}
	
	.hot-place p {
	    color: #445356;
	    font-size: 18px;
	}
	
	.hot-list {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	}
	
	.nav {
	    width: 169px;
	    height: 101px;
	    position: relative;
	    margin-bottom: 13px;
	}
	
	.nav image {
	    width: 169px;
	    height: 101px;
	}
	
	.nav view {
	    position: absolute;
	    bottom: 0px;
	    left: 5px;
	}
	
	.nav view text:first-child {
	    font-size: 16px;
	    color: white;
	}
	
	.nav view text:last-child {
	    font-size: 12px;
	    color: white;
	}
	
	.other-place {
	    padding: 0 12px;
		width: 100%;
	}
	
	.other-place>view:first-child {
	    padding: 12px 0;
	    position: relative;
	}
	
	.other-place p {
	    color: #445356;
	    font-size: 18px;
	}
	
	.other-place>view:first-child text {
	    font-size: 14px;
	    color: #868686;
	    position: absolute;
	    right: 0;
	    top: 15px;
	}
	
	.o-name {
	    height: 36px;
	    border-bottom: 1px dashed #a4a5a5;
	    font-size: 14px;
	    color: #868686;
	    line-height: 36px;
	}

</style>
